<template>
  <div id="abnormal">
    <div class="homeTitle">异常业务预警详情</div>
    <div class="abcon">
      <el-amap
        vid="amapDemo"  
        :center="center"
        :zoom="zoom"
        class="amap-demo"
        :events="events">
        <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :content="marker.content" :events="marker.events" :key="index"></el-amap-marker>
      </el-amap>
      <div class="abright">
        <div class="abrt">XXXX年XX月XX日预警情况</div>
        <!-- 查询 -->
        <div class="abquery">
          <div class="abcity">
            <span>地市：</span>
            <el-select v-model="city" placeholder="请选择" size="small" @change="cityChange">
              <el-option
                v-for="item in cityOption"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </div>
          <div class="abcity">
            <span>机构\行社：</span>
            <el-select v-model="bank" placeholder="请选择" size="small" @change="querys">
              <el-option
                v-for="item in bankOption"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 警示进度条 -->
        <div class="warnProgress" v-show="show">
          <!-- <div class="ablist" v-for="item in 50" :key="item">
            <div class="listName">XXXXX行</div>
            <div class="tiao">
              <el-progress :percentage="80" color="#C99746" :show-text='false'></el-progress>
              <div class="text">80</div>
            </div>
          </div> -->
          <div class="ablist" v-for="item in showStatus" :key="item.bankId">
            <div class="listName">{{item.bankName}}</div>
            <div class="tiao">
              <el-progress :percentage="item.count" color="#C99746" :show-text='false'></el-progress>
              <div class="text">{{item.count}}</div>
            </div>
          </div>
        </div>
        <!-- 饼形图 -->
        <div class="bingtu" v-show="!show">
          <!-- xxx行名字 -->
          <div class="single">
            <div class="listName">XXXXX行</div>
            <div class="tiao">
              <el-progress :percentage="80" color="#C99746" :show-text='false'></el-progress>
              <div class="text">80</div>
            </div>
          </div>
          <!-- ---echars------- -->
          <div class="echars">
            <div id="myChart" class="circle"></div>
          </div>
        </div>
      </div>
      <!-- ------------点击出现动画页面---------------------- -->
      <div v-if="animation" :class="[showIn ? 'fadeInRight' : '', showOut ? 'fadeOutRight' : '', 'donghua', 'animated']">
        <div class="antitle">
          <span class="title">XXXXX行社近7日预警</span>
          <span>
            <el-button @click="closedh" type="primary" size="small">关闭</el-button>
          </span>
        </div>
        <div class="jinqi">
          <div class="senvenday" v-for="item in 7">
            <div class="date">XXXX年XX月XX日</div>
            <div class="listCon">
              <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</span>
              <span><i class="el-icon-warning"></i>以承兑保证金高息揽储</span>
            </div>
            <div class="listCon">
              <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</span>
              <span><i class="el-icon-warning"></i>以同业委投将资产出表</span>
            </div>
            <div class="listCon">
              <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</span>
              <span><i class="el-icon-warning"></i>用同业资金通过非银通道新增资产</span>
            </div>
            <div class="listCon">
              <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</span>
              <span><i class="el-icon-warning"></i>向多家公司贷款用其关联企业代持资产</span>
            </div>
          </div>
        </div>          
      </div>
    </div>
    <abshow></abshow>
  </div>
</template>

<script>
import abshow from './abShou.vue';
export default {
  name: 'abnormal',
  components: {
    abshow
  },
  data () {
  let self = this;
    return {
      zoom: 12,
      center: [113.661855, 34.752628],
      markers: [],
      markerRefs: [],
      events: {
        init(o) {
          setTimeout(() => {
            console.log(self.markerRefs);
            let cluster = new AMap.MarkerClusterer(o, self.markerRefs,{
              gridSize: 80,
              renderCluserMarker: self._renderCluserMarker
            });
            console.log(cluster);
          }, 1000);
        }
      },
      // --------------右边----------
      city: '',
      cityOption: '',
      bank: '',
      bankOption: '',
      // 右边进度条
      show: true,
      showIn: false,
      // 是否彈出
      showOut: false,
      // 是否在過程中
      showIng: false,
      animation: false,
      // -------showStatus接口数据-------------
      showStatus: ''
    };
  },
  created() {
    let self = this;
    let markers = [];
    let index = 0;
    let basePosition = [113.661855, 34.752628];
    while (++index <= 30) {
      markers.push({
        position: [basePosition[0] + 0.01 * index, basePosition[1]],
        content: '<div class="abmarker"></div>',
        events: {
          init(o) {
            self.markerRefs.push(o);
          },
           click: () => {
            //  弹出蒙版
            this.ceshi();
          },
        }
      });
    }
    this.markers = markers;
  },
  mounted(){
    this.getCity();
    this.drawLine();  // 初始化echars
    this.getbank();
  },
  methods: {
    _renderCluserMarker(context) {
      const count = this.markers.length;
      let factor = Math.pow(context.count/count, 1/18)
      let div = document.createElement('div');
      let Hue = 180 - factor* 180;
      let bgColor = 'hsla('+Hue+',100%,50%,0.7)';
      let fontColor = 'hsla('+Hue+',100%,20%,1)';
      let borderColor = 'hsla('+Hue+',100%,40%,1)';
      let shadowColor = 'hsla('+Hue+',100%,50%,1)';
      div.style.backgroundColor = bgColor
      let size = Math.round(30 + Math.pow(context.count/count,1/5) * 20);
      div.style.width = div.style.height = size+'px';
      div.style.border = 'solid 1px '+ borderColor;
      div.style.borderRadius = size/2 + 'px';
      div.style.boxShadow = '0 0 1px '+ shadowColor;
      // div.innerHTML = context.count;
      div.style.lineHeight = size+'px';
      div.style.color = fontColor;
      div.style.fontSize = '14px';
      div.style.textAlign = 'center';
      context.marker.setOffset(new AMap.Pixel(-size/2,-size/2));
      context.marker.setContent(div)
    },
    querys () {
      console.log(this.value1);
      this.show= false;
    },
    ceshi () {
      if (this.showIng) return false;
      this.showIng = true;
      this.animation = true;
      this.showOut = false;
      this.showIn = true;
      setTimeout(()=>{this.showIng = false;}, 1100);
    },
    closedh () {
      if (this.showIng) return false;
      this.showIng = true;
      this.showIn = false;
      this.showOut = true;
      setTimeout(()=>{this.animation = false; this.showIng = false;}, 1100);
    },
    drawLine(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption(
        {
          // title : {
          //     text: '某站点用户访问来源',
          //     subtext: '纯属虚构',
          //     x:'center'
          // },
          // tooltip : {
          //     trigger: 'item',
          //     formatter: "{a} <br/>{b} : {c} ({d}%)"
          // },
          // legend: {
          //     orient : 'vertical',
          //     x : 'left',
          //     data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          // },
          // toolbox: {
          //     show : true,
          //     feature : {
          //         mark : {show: true},
          //         dataView : {show: true, readOnly: false},
          //         magicType : {
          //             show: true, 
          //             type: ['pie', 'funnel'],
          //             option: {
          //                 funnel: {
          //                     x: '25%',
          //                     width: '50%',
          //                     funnelAlign: 'left',
          //                     max: 1548
          //                 }
          //             }
          //         },
          //         restore : {show: true},
          //         saveAsImage : {show: true}
          //     }
          // },
          calculable : true,
          series : [
              {
                  name:'访问来源',
                  type:'pie',
                  radius : '50%',
                  center: ['50%', '50%'],
                  data:[
                      {value:335, name:'向他行股东产1'},
                      {value:310, name:'向他行股东资产2'},
                      {value:234, name:'向他行股东以股东入股出表资产3'},
                      {value:135, name:'视频广告'},
                      {value:1548, name:'向他行联企业贷款以股东入股出表资产5'}
                  ]
              }
          ]
      }
      );
    },
     // ---------二级联动开始----------------------
    // 地市查询
    getCity() {
      this.axios.get('organizationalChart/findAllCities')
      .then(({data}) => {
          this.cityOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 地市改变 
    cityChange() {
     let obj = this.cityOption.find((ele)=> {
        return ele.name == this.city;
      });
      this.bank = '';
      this.bumen = '';
      this.keshi = '';
      this.axios.get('organizationalChart/selectBank', {params: {id: obj.id}})
        .then(({data}) => {
          this.bankOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getbank() {
      this.axios.get('unusualWarn/showStatus')
        .then(({data})=> {
          this.showStatus = data.data
        })
    }
  }
};
</script>

<style lang="scss">
  #abnormal {
    @keyframes opc {
      0%   {opacity: 0;}
      50%  {opacity: 1;}
      100% {opacity: 0;}
    }
    .abmarker {
      background: #FF8800;
      text-align:center;  
      height: 12px; 
      width: 12px; 
      border-radius: 6px; 
      box-shadow: 0px 0px 8px 6px #FF8800;
      animation-direction: alternate;
      animation: opc 2s infinite;
    }
    .abcon {
      height: 590px;
      padding: 20px;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, .3);
      border-top: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      position: relative;
      .amap-demo {
        width: 40%;
        min-width: 550px;
        height: 550px;
      }
      .abright {
        margin-left: 20px;
        width: 55%;
        position: relative;
        // min-width: 600px;
        .abrt {
          color: white;
          margin-bottom: 15px;
          font-size: 20px;
        }
        .abquery {
          display: flex;
          justify-content: flex-start;
          margin-bottom: 30px;
          .abcity {
            margin-right: 60px;
            span {
              color: white;
            }
          }
        }
        .warnProgress {
          position: absolute;
          top: 100px;
          right: 0;
          left: 0;
          bottom: 0;
          overflow: auto;
          .ablist {
            display: flex;
            justify-content: flex-start;
            height: 30px;
            align-items: center;
            .listName {
              width: 160px;
              color: white;
            }
            .tiao {
              display: flex;
              width: 100%;
              align-items: center;
              .el-progress {
                width: 80%;
              }
              .text {
                padding-left: 20px;
                color: white;
              }
            }
          }
        }
        .bingtu {
          width: 100%;
          .single {
            display: flex;
            justify-content: flex-start;
            .listName {
              width: 30%;
              color: white;
            }
            .tiao {
              height: 30px;
              width: 60%;
              display: flex;
              align-items: center;
              justify-content: center;
              .el-progress {
                width: 100%;
              }
              .text {
                padding-left: 20px;
                color: white;
              }
            }
          }
          .circle {
            width: 700px;
            height: 400px;
          }
        }
      }
      // 黑色背景侧边滑动
      .donghua {
        position: absolute;
        width: 55%;
        min-width: 640px;
        top: 0;
        bottom: 0;
        right: 0;
        bottom: 0;
        padding: 10px 0px 20px;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, .9);
        .antitle {
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          .title {
            color: white;
          }
        }
        .jinqi {
          position: absolute;
          top: 70px;
          width: 100%;
          padding: 0 20px;
          box-sizing: border-box;
          bottom: 20px;
          overflow-y: auto;
          .senvenday {
          .date {
            color: #148de7;
          }
          .listCon {
            display: flex;
            justify-content: space-between;
            line-height: 24px;
            span {
              &:first-child {
                margin-left: 50px;
                color: white;
              }
              &:last-child {
                color: #ff8080;
                display: inline-block;
                width: 280px;
                font-size: 12px;
                text-align: left;
                i {
                  margin-right: 10px;
                }
              }
            }
            }
          }
        }
      }
    }
  }
</style>
